<#include "/common/_layout.html">
<#assign pageJavascript>
<script type="text/javascript" src="/assets/mqtt/mqttws31.js"></script>
<script type="text/javascript">
var seekey = function(msg){
	layer.open({title:'产品密钥',content: msg,icon:4,btn:[]});
};

var client;
var clientid = 'admin/${(sid)!}';
// 连接成功
function onConnect() {
    var subtopic = 'out/'+clientid;
    client.publish = function(topic, commond) {
        message = new Paho.MQTT.Message(commond);
        message.destinationName = topic;
        client.send(message);
    }
    //client.subscribe(subtopic, {qos: 0});
}
// 连接丢失
function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0){
		layer.msg("连接丢失!");
	};
}
// 消息到达    
function onMessageArrived(message) {
	$("#revicemsg").html(message.payloadString);
}
var connect = function(){
	$('#mymessage').modal('show');
	client = new Paho.MQTT.Client("${mqttserver!}", 1881, clientid);
	client.onConnectionLost = onConnectionLost;
	client.onMessageArrived = onMessageArrived;
    client.connect({onSuccess:onConnect,
		   userName:'${(susername)!}', 
		   password:'${(spwd)!}'});
    
};
var publish = function(){
	var titlev = $("#title").val();
	var detailsv = $("#details").val();
	var paras = "{'title':"+titlev+",'details':"+detailsv+"}"
     var topic = 'in/'+clientid;
    if(client!=null){
        //client.publish(topic, paras);
    	$.post("/admin/device/product/publish",{para:paras},function(data){layer.msg(data.msg);});
    }
    $('#mymessage').modal('hide');
    client.disconnect();
};
var disconnect = function(){
    if(client!=null){
        client.disconnect();
    }
};
$(function(){
	var validForm = $('#modalForm').Validform({tiptype:4});
	$('#savebtn').click(function(){
		if(!validForm.check(false))return false;
		var para = $('#modalForm').serializeObject();
		var loadIndex = layer.load();
		$.post("/admin/device/product/save?v="+Math.random(),para,function(data){
           if (data.msg == 'success') {
        	   layer.alert('保存成功！',{icon: 6},function(index){
        		   layer.close(index);
        	   });
       		   listPage.gopage(10,1);
           }
	       else {layer.msg('保存失败！', {icon: 5});}
           layer.close(loadIndex);
       	   $('#myModal').modal('hide');
       	   $.post("/admin/device/product/disconnect",{cid:$("#clientid").val()},function(data){layer.msg(data.msg);});
		});
	});
	$('#addbtn').click(function(){
		validForm.resetForm();
		$('#myModal').modal('show');
	});
	listPage.config = {listUrl:"/admin/device/product/profile",delUrl:"/admin/device/product/delete"};
	listPage.showlist = function(data){
		if(data.list == undefined) return false;
		$("#showlist").empty();
		$.each(data.list, function (i, row) {
			var ptype = "其他";
			if(row.ptype==1)ptype="wifi";
			if(row.ptype==2)ptype="蓝牙";
			var str = '<tr id="tr_'+row.id+'"><td>'+row.pname+'</td><td>'+row.id+'</td><td>'+ptype+'</td><td>'+row.intime+'</td><td>'
			+'<button class="btn btn-primary btn-xs" onclick="seekey(\''+row.pmkey+'\')">查看密钥</button>&nbsp;&nbsp;<button class="btn btn-success btn-xs" onclick="connect()">通知消息</button></tr>';
			$("#showlist").append(str);
		});
		$("#page").page({total:data.totalRow,currentpage:data.pageNumber,gopage:listPage.gopage,pagesize:data.pageSize});
	};
	$("#querybtn").click(function(){
		listPage.gopage(10,1);
	});
	$("#querybtn").click();
});
</script>
</#assign>
<#assign pageCss>
<style type="text/css">
</style>
</#assign>
<@layout pageTitle="产品管理" pageJavascript=pageJavascript pageCss=pageCss>		
<#include "/admin/device/_menu.html">
<div class="modal fade" id="mymessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">消息通知</h4>
      </div>
      <div class="modal-body">
<form id = "form1" class="form-horizontal">
  <div class="form-group">
    <label for="pid" class="col-sm-2 control-label">消息标题</label>
    <div class="col-xs-10 col-sm-8">
    	<input type="text" id="title" datatype="*2-20" value="" placeholder="请输入消息标题" class="form-control">
    </div>
  </div>
    <div class="form-group">
    <label for="pid" class="col-sm-2 control-label">消息详情</label>
    <div class="col-xs-10 col-sm-8">
    	<textarea id="details" name="details" datatype="*2-200" rows="5" class="form-control" placeholder="请输入消息详情"></textarea>
    </div>
  </div>
</form>
      </div>
      <div class="modal-footer">
       <button type="button" onclick="publish();" class="btn btn-primary">发布</button>
      <!-- <button type="button" onclick="disconnect();" class="btn btn-danger">断开</button> -->
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加产品</h4>
      </div>
      <div class="modal-body">
      	<form class="form-horizontal" id="modalForm">
			<div class="form-group">
				<label for="deviceProduct.pname" class="col-sm-2 control-label">产品名称</label>
				<div class="col-sm-10">
					<input class="form-control" id="deviceProduct.pname" name="deviceProduct.pname" placeholder="请输入产品名称" datatype="*2-15">
				</div>
			</div>
			<div class="form-group">
				<label for="deviceProduct.remark" class="col-sm-2 control-label">产品描述</label>
				<div class="col-sm-10">
					<textarea rows="2" class="form-control" id="deviceProduct.remark" name="deviceProduct.remark" placeholder="请输入产品描述" ></textarea>
				</div>
			</div>
			<div class="form-group">
				<label for="deviceProduct.ptype" class="col-sm-2 control-label">设备类型</label>
				<div class="col-sm-10">
					<select class="form-control" id="deviceProduct.ptype" name="deviceProduct.ptype" datatype="*">
						<option value="">请选择设备类型</option>
						<option value="1">WIFI</option>
						<option value="2">蓝牙</option>
						<option value="3">其他</option>
					</select>
				</div>
			</div>
	   </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="savebtn">保存</button>
      </div>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body filter">
	<div class="form-inline">
		<div class="form-group">
			<label for="cname">类目名称</label> 
			<input type="text" class="form-control" id="cname" data-rule="like">
		</div>
		<button id="querybtn" class="btn btn-default">查询</button>
		<button id="addbtn" class="btn btn-success">新增</button>
	</div>
  </div>
</div>
<table class="table table-bordered table-hover table-striped">
	<thead>
		<tr>
			<th width="100px">产品名称</th>
			<th width="100px">产品PID</th>
			<th width="80px">产品类型</th>
			<th width="120px">创建时间</th>
			<th width="100px">操作</th>
		</tr>
	</thead>
	<tbody id="showlist"></tbody>
</table>
<nav><ul id="page" class="pagination"></ul></nav>
</@layout>